<template>
  <div class="container">
    <div class="top">
      <div class="left">招标过程监控</div>
    </div>
    <div class="countdown on">
      <div class="title">距离本轮竞价结束还剩</div>
      <!-- 本轮竞价已结束 -->
      <div class="time">
        <div class="item">
          <div class="number">00</div>
          <div class="text">Days</div>
        </div>
        <img class="maohao" src="@/assets/images/maohao.png" alt="">
        <div class="item">
          <div class="number">00</div>
          <div class="text">Hours</div>
        </div>
        <img class="maohao" src="@/assets/images/maohao.png" alt="">
        <div class="item">
          <div class="number">00</div>
          <div class="text">Minutes</div>
        </div>
        <img class="maohao" src="@/assets/images/maohao.png" alt="">
        <div class="item">
          <div class="number">00</div>
          <div class="text">Seconds</div>
        </div>
      </div>
    </div>
    <div class="name-div">
      <div class="name">
        <img src="@/assets/images/xiangmu-big.png" alt="">
        <div>项目名称：<span>xxxxxxxxxxxxxxx</span> </div>
      </div>
      <div class="name">
        <img src="@/assets/images/time.png" alt="">
        <div>报价结束时间：<span>2023年12月20日 10:15:29</span> </div>
      </div>
    </div>
    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          label="排序"
          type="index"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column v-for="(item) in columns" :key="item.key" :sortable="item.sortable" :fixed="item.fixed" :prop="item.key" :label="item.title" :width="item.width">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '最新报价',
          key: 'date',
          sortable:true,
        },
        {
          title: '供应商代码',
          key: 'name',
        }, {
          title: '供应商名称',
          key: 'people',
        }, {
          title: '历史报价记录',
          key: 'time',
          width:'400px',
        }
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }],
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 40px 100px;
  background: #fff;

  .top {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #E1E1E1;

  }
  .countdown{
    width: 100%;
    min-height: 350px;
    background: url('~@/assets/images/bg-blue.png') no-repeat top;
    background-size: 100% 100%;
    color: #fff;
    padding: 40px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    &.on{
    background: url('~@/assets/images/bg-orange.png') no-repeat top;
    background-size: 100% 100%;
    }
    .title{
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 20px;
      margin-bottom: 40px;
      &::before{
        content: '';
        display: inline-block;
        width: 169px;
        height: 2px;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
        margin-right: 50px;
      }
      &::after{
        content: '';
        display: inline-block;
        width: 169px;
        height: 2px;
        background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
        margin-left: 50px;
      }
    }
    .time{
      display: flex;
      justify-content: center;
      .maohao{
        width: 20px;
        object-fit: contain;
        margin: 0 20px;
        margin-top: -20px;
      }
      .item{
        .number{
          width: 132px;
          text-align: center;
          font-family: JCHEadA;
          font-size: 110px;
          background: url('~@/assets/images/daojishi-bg.png') no-repeat center;
          background-size: contain;
        }
        .text{
          text-align: center;
          font-size: 20px;
          font-weight: 300;
          font-family: PingFangSC, PingFang SC;
        }
      }
    }
  }
  .name-div{
    display: flex;
    padding: 20px 58px;
    .name{
      display: flex;
      align-items: center;
      & + .name{
        margin-left: 100px;
      }
      img{
        width: 24px;
        margin-right: 6px;
      }
      span{
        font-weight: 300;
        font-family: PingFangSC, PingFang SC;
      }
    }
  }
  .table-box {
    padding: 0 58px 32px;
    ::v-deep .el-table th.el-table__cell {
      background-color: rgba(0, 0, 0, 0.04);
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>